<template>
  <div>
    <!-- 卡片 shadow 设置阴影   -->
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <!-- 
                type 设置按钮的类型(一共6中类型:default|primary|warning|danger|success|info)
                size 设置按钮大小  large|default|small
             -->
      <!-- 点击添加时展示添加品牌的对话框 -->
      <!-- 通过使用自定义全局指令判断按钮是显示还是隐藏(按钮权限),注意要加单引号,不然就是变量,而不是字符串了 -->
      <el-button
        type="primary"
        size="default"
        :icon="Plus"
        @click="addTrademark"
        v-authority="'btn.Trademark.add'"
        >添加</el-button
      >
      <!-- 表格  data 设置展示数据  border 设置边框-->
      <el-table
        :data="tmObj.records"
        border
        style="margin: 20px 0"
        v-loading="loading"
        element-loading-text="努力加载中..."
      >
        <!-- 表格列  label设置表头 align设置列的水平位置 width设置列的宽度
                    type 设置对应列的类型 
                    prop 设置字段名称,是以div的结构去展示数据,所以不能展示类似图片这样的数据
        -->
        <el-table-column
          label="序号"
          align="center"
          :width="100"
          type="index"
        ></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO">
          <!-- 展示图片和按钮时,因为需要展示的是结构,所以需要使用插槽,且是作用域插槽
                v-slot可简写为 #
             -->
          <template v-slot="{ row, $index }">
            <a :title="row.tmName">
              <img
                :src="row.logoUrl"
                alt=""
                style="width: 80px; height: 60px"
              />
            </a>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <!-- 修改按钮 -->
            <el-button
              type="warning"
              size="small"
              :icon="Edit"
              @click="updateTrademark(row)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="Delete"
              :title='`你确定要删除${row.tmName}吗?`'
              @confirm="deleteTrademark(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 
                current-page 当前页码 可使用v-model进行双向绑定
                page-size 一页展示几条数据 可使用v-model进行双向绑定
                page-sizes 下拉框可选一页展示的数据
                pager-count 设置最大页码按钮数
                total 总数据
                layout 属性排列位置
            -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="tmObj.total"
        :page-sizes="[3, 5, 7]"
        :pager-count="7"
        layout="prev, pager, next, jumper,->,sizes,total,"
        background
        @current-change="getTrademarkList"
        @size-change="sizeChange"
      >
      </el-pagination>

      <!-- 对话框  title设置对话框标题-->
      <el-dialog v-model="dialogFormVisible" title="添加品牌" draggable>
        <!-- 表单 -->
        <!-- 在父组件上定义的样式,子组件继承了,避免了每个单独的问题 -->
        <!-- 表单验证第一步:绑定model属性 第二部:绑定rules属性,设置验证规则-->
        <el-form
          style="width: 80%"
          label-width="90px"
          :model="tmParams"
          :rules="rules"
          ref="ruleFormRef"
        >
          <!-- 获取品牌名称的表单项  label设置框前面的名字 -->
          <el-form-item label="品牌名称" prop="tmName">
            <el-input autocomplete="off" v-model="tmParams.tmName" />
          </el-form-item>
          <!-- 获取品牌LOGO的表单项 -->
          <el-form-item label="品牌LOGO" prop="logoUrl">
            <el-upload
              class="avatar-uploader"
              action="/api/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="tmParams.logoUrl"
                :src="tmParams.logoUrl"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addOrUpdateTm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入icon图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
} from "@element-plus/icons-vue";
// 引入响应式API
import { ref, onMounted, reactive, nextTick } from "vue";
// 引入接口
import {
  reqAddOrUpdateTm,
  reqDeleteTrademark,
  reqTrademarkList,
} from "@/api/product/trademark/trademark";
import type {
  trademark,
  trademarkResponseData,
} from "@/api/product/trademark/model/trademark";
// 引入element-plus组件中需要的文件
import { ElMessage } from "element-plus";
import type { UploadProps, FormRules, FormInstance } from "element-plus";
// 定义响应式数据
let currentPage = ref<number>(1);
let pageSize = ref<number>(3);
// 定义控制loading效果的响应式数据
let loading = ref<boolean>(false);
// 定义对话框显示或隐藏
let dialogFormVisible = ref<boolean>(false);
// 获取form的DOM
let ruleFormRef = ref<FormInstance>();
// 定义传给服务器的数据
let tmParams = reactive<trademark>({
  tmName: "",
  logoUrl: "",
});

// 定义服务器返回来的数据
let tmObj = reactive<trademarkResponseData>({
  total: 0,
  records: [],
});

// 挂载时发请求
onMounted(() => {
  getTrademarkList(1);
});

// 定义品牌管理列表发请求的方法
const getTrademarkList = async (page: number = 1) => {
  // 请求之前加载中
  loading.value = true;
  // 整理参数,一定要记得让当前页码就是用户点击的页面,这样之后更新每页条数时,才会回到第一页
  currentPage.value = page;
  let result = await reqTrademarkList(currentPage.value, pageSize.value);
  // console.log(result);
  tmObj.total = result.total;
  tmObj.records = result.records;
  // 数据返回之后不再显示加载状态
  loading.value = false;
};

// 定义每页条数改变时触发
const sizeChange = (limit: number) => {
  // 整理数据
  pageSize.value = limit;
  // 再次发送请求获取最新数据
  getTrademarkList();
};

// 文件上传成功的回调
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  tmParams.logoUrl = response.data;
};

// 文件上传之前的回调(用于判断上传文件是否合法,类似表单验证)
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  // 判断图片类型
  if (
    rawFile.type == "image/jpeg" ||
    rawFile.type == "image/png" ||
    rawFile.type == "image/gif"
  ) {
    // 判断图片大小
    if (rawFile.size / 1024 / 1024 <= 5) {
      return true;
    }
  } else {
    return false;
  }
};

// 点击确认按钮新增/修改品牌数据
const addOrUpdateTm = () => {
  ruleFormRef.value?.validate(async (success) => {
    // 如果验证通过
    if (success) {
      await reqAddOrUpdateTm(tmParams);
      // 添加成功关闭对话框
      dialogFormVisible.value = false;
      // 再次发请求获取最新数据,通过有无id判断是留在当前页还是回到首页
      getTrademarkList(tmParams.id ? currentPage.value : 1);
      // 弹出添加成功的消息框
      ElMessage({
        message: tmParams.id ? "修改数据成功" : "添加数据成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: "操作失败",
        type: "error",
      });
    }
  });
};

// 点击添加按钮弹出对话框
const addTrademark = () => {
  // 弹出对话框
  dialogFormVisible.value = true;
  // 清空数据
  tmParams.id = "";
  tmParams.tmName = "";
  tmParams.logoUrl = "";
  // 清空之前的验证信息
  ruleFormRef.value?.resetFields();
};

// 点击修改按钮修改品牌
const updateTrademark = (row: trademark) => {
  dialogFormVisible.value = true;
  nextTick(() => {
    // 因为resetFields方法会将值重置为初始值,所以需要修改下代码位置,即重置之后再获取最新数据即可
    ruleFormRef.value?.resetFields();
    // 获取数据
    tmParams.id = row.id;
    tmParams.tmName = row.tmName;
    tmParams.logoUrl = row.logoUrl;
  });
};

// 表单验证规则
const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: "品牌名称不能为空", trigger: "blur" },
    {
      required: true,
      min: 2,
      max: 10,
      message: "品牌名称必须在2~10之间",
      trigger: "change",
    },
  ],
  logoUrl: [{ required: true, message: "请上传品牌LOGO" }],
});

// 点击气泡框中的确定然后删除品牌数据
const deleteTrademark = async(row:trademark)=>{
  try {
    await reqDeleteTrademark(row.id)
    ElMessage({
      type:'success',
      message:`删除${row.tmName}成功`
    })
    // 再次发送请求获取最新数据并停留在当前页面
    getTrademarkList(currentPage.value)
  } catch (error) {
    ElMessage({
      type:'error',
      message:'操作失败'
    })
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>